/* element-overrides.css */

:root {
  /* 主色调系 */
  --el-color-primary: #ff6b35; /* 将主色改为橙色 */
  /* 成功色 */
  --el-color-success: #34c759; /* 修改成功色 */
  /* 警告色 */
  --el-color-warning: #ff9500; /* 修改警告色 */
  /* 危险/错误色 */
  --el-color-danger: #ff3b30; /* 修改危险色 */
  --el-color-error: #ff3b30; /* 修改错误色 */
  /* 信息色 */
  --el-color-info: #5856d6; /* 修改信息色 */
  /* 背景色 */
  --el-bg-color: #f8f9fa; /* 将默认背景色改为浅灰色 */
  /* 文字色 */
  --el-text-color-primary: #1c1c1e; /* 修改主要文字色 */
  /* 边框色 */
  --el-border-color: #c7c7cc; /* 修改边框色 */

  /* 修改 Primary 颜色的状态 */
  --el-color-primary-light-3: #ff9b68; /* 修改 hover 等浅色状态 */
  --el-color-primary-light-5: #ffb48c;
  --el-color-primary-light-7: #ffd6c2;
  --el-color-primary-light-9: #fff2ed;
  --el-color-primary-dark-2: #e45a2b; /* 修改 active 等深色状态 */

  /* 按钮相关变量 */
  --el-button-font-weight: var(--el-font-weight-primary);
  --el-button-border-color: var(--el-border-color);
  --el-button-bg-color: var(--el-fill-color-blank);
  --el-button-text-color: var(--el-text-color-regular);
  --el-button-disabled-text-color: var(--el-disabled-text-color);
  --el-button-disabled-bg-color: var(--el-fill-color-blank);
  --el-button-disabled-border-color: var(--el-border-color-light);
  --el-button-divide-border-color: rgba(255, 255, 255, 0.5);
  --el-button-hover-text-color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-color-primary-light-9);
  --el-button-hover-border-color: var(--el-color-primary-light-7);
  --el-button-active-text-color: var(--el-button-hover-text-color);
  --el-button-active-border-color: var(--el-color-primary);
  --el-button-active-bg-color: var(--el-button-hover-bg-color);
  --el-button-outline-color: var(--el-color-primary-light-5);
  --el-button-hover-link-text-color: var(--el-text-color-secondary);
  --el-button-active-color: var(--el-text-color-primary);
}

/* 直接的 CSS 覆盖，确保样式生效 */
.el-button {
  background-color: var(--el-button-bg-color);
  border-color: var(--el-button-border-color);
  color: var(--el-button-text-color);
}

.el-button:hover {
  background-color: var(--el-button-hover-bg-color) !important;
  border-color: var(--el-button-hover-border-color) !important;
  color: var(--el-button-hover-text-color) !important;
}

.el-button:active {
  background-color: var(--el-button-active-bg-color) !important;
  border-color: var(--el-button-active-border-color) !important;
  color: var(--el-button-active-text-color) !important;
}

/* 覆盖无类型的按钮样式 */
.el-button:not(.el-button--primary):not(.el-button--success):not(
    .el-button--warning
  ):not(.el-button--danger):not(.el-button--info) {
  background-color: var(--el-button-bg-color);
  border-color: var(--el-button-border-color);
  color: var(--el-button-text-color);
}

.el-button:not(.el-button--primary):not(.el-button--success):not(
    .el-button--warning
  ):not(.el-button--danger):not(.el-button--info):hover {
  background-color: var(--el-button-hover-bg-color) !important;
  border-color: var(--el-button-hover-border-color) !important;
  color: var(--el-button-hover-text-color) !important;
}

.el-button:not(.el-button--primary):not(.el-button--success):not(
    .el-button--warning
  ):not(.el-button--danger):not(.el-button--info):active {
  background-color: var(--el-button-active-bg-color) !important;
  border-color: var(--el-button-active-border-color) !important;
  color: var(--el-button-active-text-color) !important;
}

/* 禁用状态 */
.el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button.is-disabled:active {
  background-color: var(--el-button-disabled-bg-color) !important;
  border-color: var(--el-button-disabled-border-color) !important;
  color: var(--el-button-disabled-text-color) !important;
}
